
var coinImage = new Image();
coinImage.src = "images/coin-sprite-animation.png";


var canvas = document.getElementById("coinAnimation");
canvas.width = 1000;
canvas.height = 1000;



function gameLoop () 
{
  window.requestAnimationFrame(gameLoop);
  
  coin.update();
  coin.render();
  
  coin2.update2();
  coin2.render2();
}



function tabclick(e)
{
	tapX = e.targetTouches ? e.targetTouches[0].pageX : e.pageX,
	tapY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;
	
}
// Start the game loop as soon as the sprite sheet is loaded
coinImage.addEventListener("load", gameLoop);
canvas.addEventListener("mousedown",tabclick);




var coin = sprite({
    context: canvas.getContext("2d"),
    width: 1000,
    height: 1000,
    image: coinImage,
    numberOfFrames: 10,
    ticksPerFrame: 4
     
});


function sprite (options) 
{			
   var that = {},
        frameIndex = 0,
        tickCount = 0,
        ticksPerFrame = options.ticksPerFrame || 0;
        numberOfFrames = options.numberOfFrames || 1;
 	
    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;
    that.loop = options.loop;

        that.update = function () 
    {
        tickCount += 1;			
        if (tickCount > ticksPerFrame) 
        {
        	tickCount = 0;
       	// If the current frame index is in range
            if (frameIndex < numberOfFrames - 1) 
       		{ frameIndex += 1; /*Go to the next frame*/ } 
             	else if (that.loop) 
             	{ frameIndex = 0; } 
	       			else
	       			{ frameIndex=!1; }
       }
    };
    	that.render = function () 
    	{ 
  			 /* Clear the canvas*/
   			 that.context.clearRect(0, 0, that.width, that.height);
			    // Draw the animation     
			    that.context.drawImage( 
			    	that.image,          
					frameIndex * that.width / numberOfFrames,
			           0,
			           that.width / numberOfFrames, 
			           that.height,
			           0, 
			           0,
			           that.width / numberOfFrames,
			 			that.height);
 		};
 		
    return that;
}










var coin2 = sprite2({
    context: canvas.getContext("2d"),
    width: 1000,
    height: 1000,
    image: coinImage,
    numberOfFrames2: 10,
    ticksPerFrame2: 2
     
});


function sprite2 (options) 
{			
   var that = {},
        frameIndex2 = 0,
        tickCount2 = 0,
        
        ticksPerFrame2 = options.ticksPerFrame2 || 0;
        numberOfFrames2 = options.numberOfFrames2 || 1;
 	
    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;
    that.loop = options.loop;

        that.update2 = function () 
    {
        tickCount2 += 1;			
        if (tickCount2 > ticksPerFrame2) 
        {
        	tickCount2 = 0;
       	// If the current frame index is in range
            if (frameIndex2 < numberOfFrames2 - 1) 
       		{ frameIndex2 += 1; /*Go to the next frame*/ } 
             	else if (that.loop) 
             	{ frameIndex2 = 0; } 
	       			else
	       			{ frameIndex2=!0; }
       }
    };
    	that.render2 = function () 
    	{ 
  			 /* Clear the canvas*/
   			 //that.context.clearRect(0, 0, that.width, that.height);
			    // Draw the animation     
			    that.context.drawImage( 
			    	that.image,          
					frameIndex2 * that.width / numberOfFrames2,
			           0,
			           that.width / numberOfFrames2, 
			           that.height,
			           100, 
			           0,
			           that.width / numberOfFrames2,
			 			that.height);
 		};
 		
    return that;
}



